<?php echo $this->render('/public/header');?>
<style>
input[type=file]{
	display:none
}
</style>
<script src="https://cdn.bootcss.com/element-ui/1.4.2/index.js"></script>
<link href="https://cdn.bootcss.com/element-ui/1.4.2/theme-default/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/xlsx/0.11.3/xlsx.full.min.js"></script>
<div id="main" class="col-ld-12 col-xs-12 col-md-12 col-sm-12">
	<div class='col-lg-2'>
		<el-upload 
		action='/finance/upload_sample_excel' 
		class="upload_demo" 
		:on-success="handlesuccess"
		:on-change="handlechange"
		:auto-upload="false"
		ref="upload"
		>
		<el-button slot="trigger" size="small" type="primary">选择文件</el-button>
		<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
	</el-upload>

</div>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="excel_container">
</div>

</div>
<script type="text/javascript">
	var vm = new Vue({
		el:"#main",
		methods:{
			handlesuccess:function(res){
				if(res.code==1)
				{
					this.$message({
						type:"success",
						message:res.msg
					})
				}
				else
				{
					$this.$message({
						type:"error",
						message:res.msg
					})
				}
			},
			handlechange:function(file){
				if (file.raw.type!="application/vnd.ms-excel" && file.raw.type!="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
				{
					this.$message({
						type:"error",
						message:"不是excel文件"
					});
					return false;
				}
				var reader = new FileReader();
				reader.onload = function(e){
					var data = e.target.result;
					wb = XLSX.read(data, {
						type: 'binary'
					});
					var str = XLSX.utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]);
					$("#excel_container").html(str);
					$("#excel_container").find('table').addClass('table table-borderd');
				}
				reader.readAsBinaryString(file.raw);
			},
			submitUpload:function(){
				this.$refs.upload.submit();
			}
		}
	})
</script>
<?php echo $this->render('/public/footer');?>